<template>
	<view class="container">
		<!-- 顶部导航栏 -->
		<view class="header">
			<text class="back" @click="goBack">＜</text>
			<text class="title">待支付订单</text>
			<view class="right-icons"></view>
		</view>

		<!-- 订单信息 -->
		<view class="order-info">
			<view class="info-section">
				<view class="info-header">
					<text>订单信息</text>
					<text class="status">{{formatOrderStatus(orderInfo.orderStatus)}}</text>
				</view>
				<view class="divider"></view>
				<view class="info-item">
					<text class="label">订单号：</text>
					<text class="value">{{orderInfo.orderNum}}</text>
				</view>
				<view class="info-item">
					<text class="label">服务项目：</text>
					<text class="value">{{serviceInfo.serviceName}}</text>
				</view>
				<view class="info-item">
					<text class="label">服务门店：</text>
					<text class="value">{{shopInfo.name}}</text>
					<image class="icon-arrow" src="/static/mp/plane.png"></image>
				</view>
				<view class="info-item">
					<text class="label">下单时间：</text>
					<text class="value">{{orderInfo.orderTime}}</text>
				</view>
				<view class="info-item">
					<text class="label">预约时间：</text>
					<text class="value">{{orderInfo.reservationTime}}</text>
				</view>
				<view class="info-item">
					<text class="label">车辆：</text>
					<text class="value">奔驰FWE4/豫A98FHJ</text>
				</view>
				<view class="info-item">
					<text class="label">备注：</text>
					<text class="value"></text>
				</view>
			</view>

			<!-- 订单详情 -->
			<view class="price-section">
				<view class="section-title">订单详情</view>
				<view class="divider1"></view>
				<view class="price-item">
					<text class="label">{{serviceInfo.serviceName}}</text>
					<text class="value">¥{{serviceInfo.serviceOriginalPrice}}</text>
				</view>
				<view class="price-item">
					<text class="label">车辆附加费用</text>
					<text class="value">0</text>
				</view>
				<view class="divider"></view>
				<view class="price-item">
					<text class="label">原价</text>
					<text class="value">¥{{serviceInfo.serviceOriginalPrice}}</text>
				</view>
				<view class="price-item discount">
					<text class="label">店家优惠</text>
					<text class="value">-¥{{serviceInfo.serviceCurrentPrice}}</text>
				</view>
				<view class="divider"></view>
				<view class="price-item discount">
					<text class="label">优惠券</text>
					<text class="value">{{-couponInfo.preferentialMoney}}</text>
				</view>
				<view class="divider1"></view>
				<view class="price-item total">
					<text class="label">支付金额</text>
					<text class="value">¥{{orderInfo.orderPrice}}</text>
				</view>
			</view>
		</view>

		<!-- 底部支付按钮 -->
		<view class="bottom-bar">
			<image class="img" src="/static/mp/客服.png"></image>
			<text class="tex">联系客服</text>
			<button class="btn1" @click="handleCancel">取消订单</button>
			<button class="btn2" @click="handlePay">立即支付</button>
		</view>
	</view>
</template>

<script>
	import request from '../../uitls/request'
	export default {
		data() {
			return {
				couponInfo:{},
				userInfo: null,
				orderInfo: {},
				serviceInfo: {},
				shopInfo: {},
				carInfo:{},
				paymentMethods: [{
						name: '微信支付',
						desc: '推荐使用微信支付',
						icon: '/static/mp/wxpay.png'
					},
					{
						name: '支付宝支付',
						desc: '推荐使用支付宝支付',
						icon: '/static/mp/alipay.png'
					}
				],
				selectedMethod: 0,
			}
		},
		onLoad(option) {
			if (option.id) {
				this.enterWaitOrder(option.id);
				// this.enterService(option.id)
			}
			console.log(option.id)
		},

		methods: {
			formatOrderStatus(status) {
				const statusMap = {
					0: '待支付',
					1: '待使用',
				};
				return statusMap[status] || '未知状态';
			},

			handleCancel() {
				uni.showModal({
					title: '确认取消',
					content: '确定要取消该订单吗？',
					success: (res) => {
						if (res.confirm) {
							this.cancelOrder();
							uni.redirectTo({
								url: '/pages/jackwang/wodedingdan/wodedingdan'
							})
						}
					}
				});
			},
			handlePay() { 
				const that = this
				const midList = []
				request({
					url: '/merchant/verification/list',
					method: 'GET',
					success: (res) => {
						// console.log(res.data)
						const result = res.data
						if(result.code==200){
							for(let i=0; i<result.rows.length; i++){
								midList.push(result.rows[i].mid)
								
							}
						}
						
						if(!midList.includes(that.orderInfo.merchantId)){
							uni.showToast({ 
								title: '该商户未实名认证',
								icon:'none'
							 });
							 return;
						}
						this.userInfo = uni.getStorageSync('userInfo')
						const points = this.userInfo.points
						// console.log(points)
						uni.showModal({
						  title: '确认支付',
						  content: '确认要支付该订单吗？',
						  success: (res) => {
							  console.log(this.orderInfo)
						    if (res.confirm) {
						      request({
						        url: '/offer/orders',
						        method: 'PUT',  
						        data: this.orderInfo,
						        success: () => {
						          uni.showToast({ title: '支付成功' });
						 that.userInfo.points = points +2;
						 uni.setStorageSync('userInfo',that.userInfo)
						          setTimeout(() => {
						            uni.redirectTo({
						              url: '/pages/jackwang/wodedingdan/wodedingdan'
						            });
						          }, 1500);
						        },
						        fail: (err) => {
						          console.error('支付失败:', err);
						          uni.showToast({ title: '支付失败', icon: 'none' });
						        }
						      });
						    }
						  }
						});
					}
				})
			},
			cancelOrder() {
				this.orderInfo.orderStatu=3
				request({
				  url: '/offer/orders/',
				  method: 'PUT',
				  data: this.orderInfo,
				  success: () => {
				    uni.$emit('updateOrderStatus');
				    this.userInfo.points += 2;
				    uni.setStorageSync('userInfo', this.userInfo);
				  }
				});
				
			},

			goBack() {
				uni.navigateBack()
			},
			selectPayMethod(index) {
				this.selectedMethod = index
			},
			enterWaitOrder(id) {
				request({
					url: `/offer/orders/`+id,
					method: 'GET',
					success: (res) => {
						// console.log(res.data)
						if (res.data.code === 200) {

							this.orderInfo = res.data.data;
							this.enterService(this.orderInfo.serviceId)
							this.enterShop(this.orderInfo.merchantId)
							this.enterCoupon(this.orderInfo.couponId)
						}
						console.log(this.orderInfo.orderNum);

					}
				})
			},
			enterService(serviceId) {
				request({
					url: `/evaluate/details/`+serviceId,
					method: 'GET',
					success: (res) => {
						if (res.data.code === 200) {
							this.serviceInfo = res.data.data;
							// this.orderInfo.serviceName=this.serviceInfo.serviceName;
						}
						console.log(this.serviceInfo.serviceName);
					}
				})
			},
			enterShop(merchantId) {
				request({
					url: `/merchant/merchant/${merchantId}`,
					method: 'GET',
					header: {
						Authorization: uni.getStorageInfoSync('token')
					},
					success: (res) => {
						if (res.data.code === 200) {
							this.shopInfo = res.data.data;
						}
						console.log(this.shopInfo.name)
					}
				})
			},
			enterCoupon(){
				request({
					url: `/xsc/coupon/${couponId}`,
					method: 'GET',	
					success: (res) => {
						if (res.data.code === 200) {
							this.couponInfo = res.data.data;
						}
						console.log(this.couponInfo.preferentialMoney)
					}
				})
			},
			seekCarInfo(){
				request({
					url: '/bigbase/carInfo/list',
					method: 'GET',	
					
					success: (res) => {
						if (res.data.code === 200) {
							this.carInfo = res.data.rows;
						}	
					}
				})	
			}

		}
	}
</script>

<style lang="scss">
	.container {
		/* #ifdef MP-WEIXIN */
		margin-top: 70rpx;
		/* #endif */
		background: url(/static/mp/背景版.png);
		background-size: 100% 35%;
		background-repeat: no-repeat;
		min-height: 100vh;
		padding-bottom: 100rpx;

		.header {
			display: flex;
			align-items: center;
			justify-content: space-between;
			padding: 40rpx 30rpx 20rpx 30rpx;
			color: #fff;

			.back {
				font-size: 28px;
				margin-right: 10px;
			}

			.title {
				font-size: 18px;
			}

			.right-icons {
				display: flex;
				gap: 20rpx;
				width: 90rpx;
			}
		}

		.order-info {
			margin: 20rpx;
			margin-bottom: 100rpx;

			.info-section {
				background: #fff;
				padding: 30rpx;
				border-radius: 25rpx;
				margin-bottom: 20rpx;

				.divider {
					height: 7rpx;
					background: #eee;
					margin: 20rpx 0;
				}

				.info-header {
					display: flex;
					justify-content: space-between;
					margin-bottom: 30rpx;
					font-size: 32rpx;

					.status {
						color: #ff5e2d;
					}

				}

				.info-item {
					display: flex;
					align-items: center;
					margin-bottom: 20rpx;
					font-size: 28rpx;

					.label {
						color: #666;
						width: 160rpx;
					}

					.value {
						color: #333;
					}

					.icon-arrow {
						width: 30rpx;
						height: 30rpx;
						margin-left: 10rpx;
					}
				}
			}

			.price-section {
				background: #fff;
				padding: 30rpx;
				border-radius: 25rpx;
				margin-bottom: 20rpx;

				.section-title {
					font-size: 32rpx;
					font-weight: 500;
					margin-bottom: 30rpx;
				}

				.price-item {
					display: flex;
					justify-content: space-between;
					margin-bottom: 20rpx;
					font-size: 28rpx;

					&.discount .value {
						color: #f44336;
					}

					&.total {
						margin-top: 20rpx;
						font-weight: 500;

						.value {
							color: #4CAF50;
						}
					}
				}

				.divider {
					height: 2rpx;
					background: #eee;
					margin: 20rpx 0;
				}

				.divider1 {
					height: 7rpx;
					background: #eee;
					margin: 20rpx 0;
				}
			}
		}

		.bottom-bar {
			position: fixed;
			bottom: 0;
			left: 0;
			right: 0;
			background: #fff;
			padding: 20rpx 30rpx;
			display: flex;
			justify-content: space-between;
			align-items: center;
			box-shadow: 0 -2rpx 10rpx rgba(0, 0, 0, 0.05);

			.img {
				width: 52rpx;
				height: 52rpx;
			}

			.tex {
				font-weight: bold;
				margin-left: 10rpx;
			}

			.btn1 {
				background-color: #bfbfbf;
				border-radius: 50rpx;
				width: 210rpx;
				height: 80rpx;
				font-size: 30rpx;
				color: #fff;
				margin-left: 70rpx;
			}

			.btn2 {
				background-color: #0863e7;
				border-radius: 50rpx;
				width: 210rpx;
				height: 80rpx;
				font-size: 30rpx;
				color: #fff;
			}
		}
	}
</style>